<template>
  <div style="height: 100%;padding-bottom:60px">
    <div
      class="q-pa-md row items-center justify-between"
      style="background-color: white; height: 60px"
    >
      <q-breadcrumbs>
        <template v-slot:separator>
          <q-icon size="1.5em" name="chevron_right" color="primary" />
        </template>
        <q-breadcrumbs-el label="应用" icon="fab fa-buffer" to="/app" />
        <q-breadcrumbs-el
          label="器材借用"
          icon="mdi-ballot-outline"
          class="text-blue"
          to="/app/assets"
        />
        <q-breadcrumbs-el
          label="设备详情"
          icon="navigation"
          class="text-blue"
        />
      </q-breadcrumbs>
    </div>
    <div class="column q-pa-none scroll" style="height: 100%;overflow:scroll;padding-bottom:60px">
      <div
        v-if="isload"
        class="row items-center justify-center"
        style="height: 100%"
      >
        <div class="text-gray column items-center">
          <q-spinner-hourglass color="primary" size="4em" />
          <div>数据加载中 <q-spinner-dots color="grey" size="2.5em" /></div>
        </div>
      </div>
      <div v-else class="column">
        <div class="row items-center justify-center" style="background-color: white">
          <img
            :src="serveurl + assetsinfo.photo"
            :style="$q.platform.is.desktop ? 'width:50%' : 'width:100%'"
          />
        </div>

        <div class="text-h6 q-px-md q-py-sm q-my-sm" style="background-color: white">{{ assetsinfo.name }}</div>
        <div class="text-grey-8 column q-px-md q-py-sm"  style="background-color: white">
          <div class="text-subtitle1 q-mb-sm">
            资产编号：{{ assetsinfo.aid }}
          </div>
          <div class="text-subtitle1 q-mb-sm">
            规格型号：{{ assetsinfo.model }}
          </div>
          <div class="text-subtitle1 q-mb-sm ">
            资产配件:
          </div>
           <div class="text-subtitle1 q-mb-sm text-justify " style="display:flex;text-indent:2em">
                  {{ assetsinfo.accessories }}
            </div>
          <div class="text-subtitle1 q-mb-sm">
            资产价格：{{ assetsinfo.price }}元
          </div>
        </div>
        <div style="position:fixed;bottom:60px;height:50px;width:100%;background-color: white" class="row items-center justify-center">
          <div class="row justify-center">
 <q-btn-group push>

      <q-btn color="primary" push label="加入借用清单" icon="mdi-ballot-outline" ><q-badge color="red" floating>0</q-badge></q-btn>
      <q-btn color="negative" push label="立即借用" icon="mdi-backburger" />

    </q-btn-group>
          </div>
           
        </div>

      </div>
    </div>
  </div>
</template>
<script>
import { getassetsinfo } from "assets/api/assets";
export default {
  name: "assets",
  data() {
    return {
      aid: "",
      serveurl: "",
      assetsinfo: {},
      isload: true,
    };
  },
  created() {
    this.aid = this.$route.params.aid;
    this.serveurl = this.GLOBAL.serveurl;
    this.loadassetsinfo();
  },
  methods: {
    loadassetsinfo() {
      let reqdata = {
        aid: this.aid,
      };
      getassetsinfo(reqdata).then((res) => {
        console.log(res);
        this.assetsinfo = res.data.data[0];
        this.isload = false;
      });
    },
  },
};
</script>